<!-- author: xuett -->
<!-- date: 2023-01-12 10:34:25 -->
<!-- description: 抽屉页 -- 右开-->
<template>
  <!--  -->
  <el-drawer
    v-model="drawer"
    :close-on-click-modal="modalCloseType"
    :close-on-press-escape="false"
    :title="title"
    :with-header="showHeader"
    :size="width"
    :direction="direction"
  >
    <template #header>
      <slot name="header"> </slot>
    </template>
    <!-- 内容 -->
    <template #default>
      <slot name="content"> </slot>
    </template>
    <!-- 按钮 -->
    <template #footer>
      <slot name="footer"></slot>
    </template>
  </el-drawer>
</template>

<script setup>
const $props = defineProps({
  drawerShow: {
    type: Boolean,
    default: false
  },
  // 弹窗标题
  title: {
    type: String,
    default: "新增"
  },
  showHeader: {
    type: Boolean,
    default: false
  },
  width: {
    type: [String, Number],
    default: "30%"
  },
  modalCloseType: {
    type: Boolean,
    default: false
  }
});

const $emit = defineEmits(["update:drawerShow"]);
const drawer = computed({
  get: () => $props.drawerShow,
  set: (val) => $emit("update:drawerShow", val)
});

const direction = ref("rtl");
</script>
<style lang="scss" scoped></style>
